<template>
	<view>
		<Header title="员工管理详情"></Header>
		<view class="toubu">
			<view class="content_content yinying wenzi" v-if="user.status==1">
				该账号已被关闭，如需修改，请点击修改信息进行状态修改
			</view>
			<view class="content_content xinxi">
				<view class="neirong xiahua">
					<view>姓名：{{user.nick_name}}</view>
					<view  @click="publics.navigateTo('/view/me/xiugai_xinxi?userid='+userid)">修改信息</view>
				</view>
				<view class="neirong">
					<view>账号：{{user.user_name}}</view>
					<view>联系电话：{{user.phonenumber}}
					<image src="../../static/image/me/dianhua.png" mode=""@click="publics.phone(user.phonenumber)"></image>
					</view>
				</view>
			</view>
			<view class="content_content renshu">
				<view>他的客资</view>
				<view @click="publics.navigateTo('/view/me/tuisong?state=0&userid='+userid)">{{tade}}人
				<image src="../../static/image/me/you.png" mode="" class="dianji"></image>
				</view>
			</view>
			<view class="content_content_con tongji_header shadow">
				<view class="tongji_list" v-for="(item,index) in shuju" :key="index">
					<view class="tongji_list_bor">
						<view class="two_four qianhui_ziti">{{item.name}}</view>
						<view class="thirty heise_ziti font_bold">{{item.zhi}}</view>
					</view>
				</view>
			</view>
			<view class="tongji">
				统计
			</view>
			<tongjiyg :tongjitu="tongjitu" :jisuan="jisuan" :chufa="chufa" :xiaoshu="xiaoshu" :arcbar="arcbar"></tongjiyg>
		</view>
		<requestLoading></requestLoading>
	</view>
</template>

<script>
	import tongjiyg from "@/components/tongjiyg.vue";
	 export default {
	  components:{
	   tongjiyg
	  },
		data() {
			return {
				tishi: 1 ,//展示加载动画
				userid:'',
				shuju: [{
					name: '平台客资',
					zhi: '235'
				}, {
					name: '跟进客户',
					zhi: '78'
				}, {
					name: '成交客户',
					zhi: '50'
				}, {
					name: '活动锁单',
					zhi: '20'
				}, {
					name: '退回客资',
					zhi: '8'
				}, {
					name: '取消订单',
					zhi: '0'
				}],
				tongjitu:{
					categories:{},
					series:{}
				},
				user:{},
				jisuan:{},
				tade:'',
				chufa:'',
				xiaoshu:'',
				arcbar:{}
			}
		},
		onLoad(option) {
			this.userid=option.userid
			
			console.log("option.userid",option.userid)
		},
		onReady() {

		},
		onShow(){
			this.xiangqing()
		},
		methods: {

				xiangqing() {
							var that = this;
							this.configure.ajax({
								url: 'wode/staffOfOne',
								tishi: that.tishi,
								data: {
									userid : that.userid
								},
								method: 'POST',
								success: function(res) {
								console.log("xiangqing")
								console.log(res,"返回值")
								that.shuju[0].zhi=res.data.pckznum;
								that.shuju[1].zhi=res.data.gjnum;
								that.shuju[2].zhi=res.data.cjnum;
								that.shuju[3].zhi=res.data.hdsdnum;
								that.shuju[4].zhi=res.data.thkznum;
								that.shuju[5].zhi=res.data.qxddnum;
								that.tongjitu.categories=res.data.categories
								that.tongjitu.series=res.data.series
								// that.bing= res.data.map
								that.tade=res.data.ownkznum;
								that.user=res.data.user
								that.chufa=Math.round((res.data.cjnum / res.data.pckznum) * 100)
								console.log('11111111111111111111111111111')
								// console.log(res.data.cjnum / 1)
								if(res.data.pckznum==0){
									
									that.xiaoshu='0';
									that.chufa=0;
								}else{
									that.chufa=Math.round((res.data.cjnum / res.data.pckznum) * 100)
									that.xiaoshu=((res.data.cjnum / res.data.pckznum).toFixed(1)).toString()
									that.arcbar= {
										'categories': [],
										'series': [
										  {
											'name': "订单成交/接单总量",
											'data': that.xiaoshu
										  }
										]
									  }
								}
								console.log(that.chufa,"that.chufa")
								}
							})
				}
						
		}
	}
</script>

<style lang="scss" scoped>
	.yinying{
		box-shadow: $shadow;
	}
	.wenzi{
		color: $hongse_ty;
		background-color: $beijing_qian;
		font-size: 24rpx;
		padding: 20rpx 0rpx 20rpx 0rpx;
		border-radius: 12rpx;
		text-align: center;
		margin-top: 30rpx;
	}
	.xinxi{
		box-shadow: $shadow;
		margin-top: 30rpx;
		margin-bottom: 30rpx;
		border-radius: 12rpx;
	}
	.neirong{
		font-size: 26rpx;
		display: flex;
		justify-content: space-between;
		padding: 30rpx 30rpx 24rpx 30rpx;
		color: $qianhuione_ziti;
		image{
			width: 26rpx;
			height: 26rpx;
			margin-left: 10rpx;
		}
	}
	.xiahua{
		border-bottom: 2rpx solid var(--qianhui_eee);
	}
	.xiahua view:last-child{
		color: $zhuce_color;
	}
	.renshu{
		display: flex;
		justify-content: space-between;
		// padding: 35rpx 30rpx 35rpx 30rpx;
		box-shadow: $shadow;
		view{
			padding: 35rpx 30rpx 35rpx 30rpx;
		}
		
	}
	.dianji{
		width: 14rpx;
		height: 24rpx;
		margin-left:20rpx;
		vertical-align: revert;
	}
	.renshu :first-child{
		color: $heise_ziti;
		font-size: 30rpx;
	}
	.renshu :last-child{
		color: $qianhui_ziti;
		font-size: 24rpx;
	}
	.tongji{
		font-size: 30rpx;
		color: $heise_ziti;
		font-weight: bold;
		margin: 30rpx 0 30rpx 30rpx;
		border-left: 8rpx $zhuce_color solid;
		padding-left: 16rpx;
	}
	.tongji_header {
		display: flex;
		flex-wrap: wrap;
		padding-top: 36rpx;
	}
	
	.tongji_list {
		width: 33.33%;
		text-align: center;
		margin-bottom: 36rpx;
	}
	
	.tongji_list_bor {
		border-right: 1px solid $qianhui_eee;
	}
	
	.tongji_list:nth-child(1),
	.tongji_list:nth-child(2),
	.tongji_list:nth-child(3) {
		border-bottom: 1px solid $qianhui_eee;
		padding-bottom: 30rpx
	}
	
	.tongji_list:nth-child(3n) .tongji_list_bor {
		border-right: 0px;
	}
	
	.tongji_list_bor .two_four {
		margin-bottom: 16rpx;
	}
	
	.tongji {
		font-size: 20rpx;
		color: $qianhui_ziti;
		margin-left: 30rpx;
		border-left: 8rpx $zhuce_color solid;
		padding-left: 16rpx;
	
		text {
			font-weight: bold;
			font-size: 30rpx;
			color: $heise_ziti;
		}
	}
</style>